<!-- 生产订单 -->
<template>
  <!-- 顶部标题 -->
  <pageHeader :title="title" :breadCrumb="breadCrumb">
    <!-- 插槽右侧按钮 -->
    <template #buts>
      <a-button type="primary" @click="jump">
        <template #icon><icon-plus /> </template>
        <template #default>新建生产订单 </template>
      </a-button></template>
  </pageHeader>
  <!-- 操作区 -->
  <div class="search-box">
    <!-- 左侧区 -->
    <a-space>
      <a-input-group style="background: #f2f3f5">
        <a-select v-model="fields" :options="fieldsValue" :style="{ flex: 1 }">
        </a-select>
        <!-- <p style="padding: 0 8px; margin: 0; width: 95px">物料名称</p> -->
        <a-input @press-enter="search" v-model="keyWord" :placeholder="`请输入${
            fieldsValue.filter((ele) => ele.value === fields)[0]?.label
          }`" />
      </a-input-group>
      <a-button @click="tableRef.loadData()" type="primary">
        <template #icon><icon-search size="18" /> </template>
        <template #default>搜索 </template>
      </a-button>
      <!-- 触发ref表格里的重置 -->
      <a-button @click="
          () => {
            keyWord = '';
            tableRef.loadData();
          }
        " type="outline">
        <template #icon> <icon-sync size="18" /> </template>
        <template #default>重置 </template>
      </a-button>
    </a-space>
    <!-- 右侧区 -->
    <a-space>
      <a-button status="success">
        <template #icon>
          <icon-download />
        </template>
        <template #default>导入</template>
      </a-button>
      <a-button status="warning" @click="getDemandDeriveData">
        <template #icon>
          <icon-upload />
        </template>
        <template #default>导出</template>
      </a-button>
      <a-button @click="jumpMRP" style="background: #e8f7ff; color: #518cff">
        <template #icon> <icon-sort-ascending size="18" /> </template>
        <template #default> MRP运算 </template>
      </a-button>
    </a-space>
  </div>
  <!-- 表格区 -->
  <TableTurn :args="{rowSelection: {type: 'checkbox',showCheckedAll: true,}}" style="padding: 0 10px" :table-data="getData" ref="tableRef">
    <a-table-column :width="70" align="center">
      <template #title> 序号 </template>
      <template #cell="{ rowIndex }">
        {{ rowIndex + 1 }}
      </template>
    </a-table-column>
    <a-table-column :width="160" align="center" title="生产订单编号" data-index="number" :ellipsis="true" :tooltip="{position: 'top'}">
    </a-table-column>
    <a-table-column :width="150" align="center" title="订单类型">
      <template #cell="{ record }">
        {{ record?.type === 1 ? '面向库存订单' : '面向销售订单' }}
      </template>
    </a-table-column>
    <!-- <a-table-column
      :width="150"
      align="center"
      title="关联销售订单编号"
      data-index="planProduceNumber"
    >
    </a-table-column> -->
    <a-table-column :width="150" align="center" title="产品编码" :ellipsis="true" :tooltip="{position: 'top'}">
      <template #cell="{ record }">
        {{ record?.material?.number }}
      </template>
    </a-table-column>
    <a-table-column :width="150" align="center" title="产品名称" :ellipsis="true" :tooltip="{position: 'top'}">
      <template #cell="{ record }">
        {{ record?.material?.name }}
      </template>
    </a-table-column>
    <a-table-column :width="150" align="center" title="规格型号" :ellipsis="true" :tooltip="{position: 'top'}">
      <template #cell="{ record }">
        {{ record?.material?.spec }}
      </template>
    </a-table-column>
    <a-table-column :width="150" align="center" title="基本单位" data-index="repairerName">
      <template #cell="{ record }">
        {{ record?.material?.basicUnit }}
      </template>
    </a-table-column>
    <!-- <a-table-column
      :width="150"
      align="center"
      title="销售订单数量"
      data-index="repairerName"
    >
    </a-table-column> -->
    <a-table-column :width="150" align="center" title="计划生产数量" data-index="planProduceNumber" :ellipsis="true" :tooltip="{position: 'top'}">
    </a-table-column>
    <a-table-column :width="150" align="center" title="已排数量" data-index="quantityFilled" :ellipsis="true" :tooltip="{position: 'top'}">
      <template #cell="{ record }">
        {{ record?.quantityFilled ? record?.quantityFilled : 0 }}
      </template>
    </a-table-column>
    <a-table-column :width="150" align="center" title="紧急等级" data-index="emergencyLevel">
      <template #cell="{ record }">
        <p :style="{
            color: emergencyLevel.filter(
              (ele) => ele.id === record?.emergencyLevel
            )[0]?.color,
          }">{{
            emergencyLevel.filter((ele) => ele.id === record?.emergencyLevel)[0]
              ?.value
          }}</p>
      </template>
    </a-table-column>
    <a-table-column :width="150" align="center" title="工艺路线" data-index="repairerName" :ellipsis="true" :tooltip="{position: 'top'}">
      <template #cell="{ record }">
        <p>{{
          record?.material?.productModel?.routerName
            ? record?.material?.productModel?.routerName
            : '暂无'
        }}</p>
      </template>
    </a-table-column>
    <a-table-column :width="150" align="center" title="制造BOM" data-index="repairerName">
      <template #cell="{ record }">
        <p>{{
          record?.material?.bomCode ? record?.material?.bomCode : '暂无'
        }}</p>
      </template>
    </a-table-column>
    <!-- <a-table-column
      :width="150"
      align="center"
      title="客户名称"
      data-index="customName"
    >
      <template #cell="{ record }">
        <p>{{
          clientList.data.filter((ele: any) => ele.id === record.customId)[0]
            ?.contactName
            ? clientList.data.filter(
                (ele: any) => ele.id === record.customId
              )[0]?.contactName
            : '暂无'
        }}</p>
      </template>
    </a-table-column> -->
    <a-table-column :width="150" align="center" title="计划开始日期" data-index="planBeginAt">
      <template #cell="{ record }">
        {{ `${dayjs(record.planBeginAt).format('YYYY-MM-DD')}` }}
      </template>
    </a-table-column>
    <a-table-column :width="150" align="center" title="计划完工日期" data-index="planEndAt">
      <template #cell="{ record }">
        {{ `${dayjs(record.planEndAt).format('YYYY-MM-DD')}` }}
      </template>
    </a-table-column>
    <!-- <a-table-column
      :width="150"
      align="center"
      title="交货日期"
      data-index="repairerName"
    >
    </a-table-column> -->
    <a-table-column :width="150" align="center" title="备注" data-index="remark">
    </a-table-column>
    <a-table-column :width="150" align="center" title="订单状态" data-index="status">
      <template #cell="{ record }">
        <div class="status" :style="{
            color: orderStatus.filter((ele) => ele.id === record.status)[0]
              ?.backgroundColor,
          }">
          <p :style="{
              'background': orderStatus.filter(
                (ele) => ele.id === record.status
              )[0]?.backgroundColor,
              'box-shadow': `0px 0px 5px`,
            }"></p>
          {{ orderStatus.filter((ele) => ele.id === record.status)[0]?.value }}
        </div>
      </template>
    </a-table-column>
    <!-- 操作item -->
    <a-table-column align="center" :width="200" fixed="right" title="操作">
      <template #cell="{ record }">
        <!-- <a-button
            @click="changeStatus(record.id, 2)"
            type="text"
            :disabled="record.status !== 1"
            >确认</a-button
          > -->
        <!-- <a-button
            type="text"
            :disabled="record.status !== 1"
            @click="
              router.push({
                name: 'PutProductionOrder',
                query: { id: record.id, look: 1, type: record.type },
              })
            "
          >
            编辑
          </a-button> -->
        <!-- <a-button
            type="text"
            @click="
              router.push({
                name: 'PutProductionOrder',
                query: { id: record.id, look: 2, type: record.type },
              })
            "
          >
            查看
          </a-button> -->
        <!-- <a-button
            type="text"
            :disabled="record.planProduceNumber <= record.quantityFilled"
            @click="toWorkOrder(record.id)"
          >
            创建工单
          </a-button> -->
        <!-- <a-button
          :disabled="record.status !== 1"
          status="danger"
          type="text"
          @click="del(record.id)"
        >
          删除
        </a-button> -->

        <a-tooltip v-if="record.status === 1" content="编辑">
          <IconFont type="icon-edit" :size="26" :style="{
              marginRight: '10px',
              cursor: 'pointer',
            }" @click="
              router.push({
                name: 'PutProductionOrder',
                query: { id: record.id, look: 1, type: record.type },
              })
            " />
        </a-tooltip>
        <a-tooltip content="查看详情">
          <IconFont type="icon-details-def" :size="26" :style="{
              marginRight: '10px',
              cursor: 'pointer',
            }" @click="
              router.push({
                name: 'PutProductionOrder',
                query: { id: record.id, look: 2, type: record.type },
              })
            " />
        </a-tooltip>
        <a-tooltip v-if="record.planProduceNumber > record.quantityFilled" content="创建工单">
          <IconFont type="icon-add-def" :size="26" :style="{
              marginRight: '10px',
              cursor: 'pointer',
            }" @click="toWorkOrder(record.id)" />
        </a-tooltip>
        <a-tooltip v-if="record.status === 1" content="删除">
          <a-popconfirm content="确认删除？" type="error" @ok="del(record.id)">
            <IconFont type="icon-delete" :size="26" :style="{
                marginRight: '10px',
                cursor: 'pointer',
              }" />
          </a-popconfirm>
        </a-tooltip>
      </template>
    </a-table-column>
  </TableTurn>
</template>

<script lang="ts" setup>
import {
  GetProduceOrders,
  DelProduceOrders,
  PutProduceOrderStatus,
} from '@/api/produce-management/produce-list/index';
import { GetClientList } from '@/api/order-management/client-management/client-list';
import dayjs from 'dayjs';
import { reactive, ref } from 'vue';
import pageHeader from '@/components/page-header/index.vue';
import { useRouter } from 'vue-router';
import { Message } from '@arco-design/web-vue';

type Tstatus = 1 | 2 | 3 | 4 | 5 | 6;

let tableRef = ref();
const fields = ref('keyword');
const emergencyLevel = [
  { id: 1, value: '一般', color: '#009933' },
  { id: 2, value: '紧急', color: '#409eff' },
  { id: 3, value: '加急', color: '#ff8000' },
  { id: 4, value: '特急', color: '#ff0000' },
];
const orderStatus = [
  { id: 1, value: '待确认', backgroundColor: '#cccccc' },
  { id: 2, value: '已确认', backgroundColor: '#3d92ff' },
  { id: 3, value: '待排程', backgroundColor: '#cccccc' },
  { id: 4, value: '已排程', backgroundColor: '#3d92ff' },
  { id: 5, value: '生产中', backgroundColor: '#ff8000' },
  { id: 6, value: '已完工', backgroundColor: '#2cad70' },
];
const fieldsValue = [
  { value: 'number', label: '生产订单编号' },
  // { value: 'keyword', label: '物料编码' },
  { value: 'keyword', label: '物料名称' },
  // { value: 'customName', label: '客户名称' }
  // { value: 'keyword', label: '物料名称' }
  // { value: 'customName', label: '客户名称' }
];
const keyWord = ref('');
const router = useRouter();
const title: string = '生产订单';
const breadCrumb: string[] = ['生产管理', '生产订单列表'];
const clientList: any = reactive({ data: [] });

// 获取表格数据
const getData = async (pageData?: any) => {
  try {
    const search: any = {};
    search[fields.value] = keyWord.value;
    // search.keyword = keyWord.value;
    const res = await GetProduceOrders({ ...pageData, ...search });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};
const jump = () => {
  router.push({ name: 'AddProductionOrder' });
};
// MRP运算按钮
const jumpMRP = () => {
  if (tableRef.value.selectedKeys.length === 1) {
    router.push({
      name: 'OperationMPR',
      query: { id: tableRef.value.selectedKeys[0] },
    });
  } else {
    Message.error('暂时只能选择一条数据进行MRP运算');
  }
};
let toWorkOrder = (id: any) => {
  router.push({
    name: 'WorkOrderDetails',
    query: { type: 'add', orderId: id },
  });
};
const del = async (id: number) => {
  await DelProduceOrders({ id });
  tableRef.value.loadData();
};
const changeStatus = async (id: number, status: Tstatus) => {
  await PutProduceOrderStatus({ id, status });
  tableRef.value.loadData();
};
// 搜索按下回车时触发
const search = () => {
  tableRef.value.loadData();
};
const init = async () => {
  const res2 = await GetClientList({ page: 1, size: -1 });
  clientList.data = res2.content;
};
init();
</script>

<style scoped lang="less">
.search-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px;
  margin-top: -7px;
}
.status {
  display: flex;
  align-items: center;
  justify-content: center;

  p {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
  }
}
</style>
